<template>
    <div class="content">
        <div class="w100 haed bbg pr">
            <img @click="getBack" class="fl hpd pa" style="height: 40rem;left: 20rem;top: 7rem;" src="../../assets/img/back.png">
            <p class="fz37 cfff hpd tc">详情</p>
        </div>
        <main>
            <div class="wash-info">
                <h1 class="fn">维修信息</h1>
                <div style="color: #333;">
                    <p>维修单号:<span>{{obj.orderCode}}</span></p>
                    <p>车主姓名:<span>{{obj.userName}}</span></p>
                    <p>联系方式:<span>{{obj.userTel}}</span>
                        <img style="width: 29rem;height: 29rem;" src="../../assets/img/maintain/tel.png" alt="">
                    </p>
                    <p>维修方式:<span>{{obj.serviceItem}}</span></p>
                    <p>取车位置:<span>{{obj.businessArea}}</span>
                        <img style="width: 31rem;height: 33rem;" src="../../assets/img/maintain/plane.png" alt="">
                    </p>
                    <p>预约日期:<span>{{obj.bookingTime | formDate}}</span></p>
                    <p>提交日期:<span>{{obj.createdDate | formDate}}</span></p>
                    <p v-if="isShow">到场时间:<span>{{present | formDate}}</span></p>
                </div>
            </div>
            <div class="car-info">
                <h1 class="fn">车辆信息</h1>
                <div style="color: #333;">
                    <p>车辆类型:<span>{{carObj.carType}}</span></p>
                    <p>车牌号:<span style="padding-left: 44rem;">{{carObj.carNum}}</span></p>
                    <p class="car-img">整车照片:</p>
                    <img :src="carObj.images" alt="">
                    <p class="car-img">维修部位图片:</p>
                    <img src="../../assets/img/maintain/plane.png" alt="">
                    <img src="../../assets/img/maintain/plane.png" alt="">
                    <img src="../../assets/img/maintain/plane.png" alt="">
                </div>
            </div>
        </main>
        <div class="btn">
            <button @click="onConfirm" id="confirmBtn" :style="styleStr">{{msg}}</button>
        </div>
    </div>
</template>
<script>
import {myCar} from '../../api/index'
export default{
    data(){
        return {
            msg:'确认到场', 
            styleStr:'', // 修改样式
            isShow:false,  // 是否显示
            obj:{},
            carObj:{},
            present:new Date()
        }
    },
    mounted(){
        this.obj = this.$route.query.el;
        //  获取我的车辆
        myCar({uid:this.obj.createdBy})
        .then(r =>{
            console.log(r);
            // console.log(r.data);
            this.carArr = r.data;
            this.carObj = this.carArr[0];
        })
    },
    methods:{
        //  点击确认到场
        onConfirm(){
            this.msg = '已到场';
            this.styleStr = "backgroundColor:#808080";
            this.isShow = true;
        },
         //  后退
         getBack(){
            this.$router.back();
        },
        
    },
    filters:{
        formDate(val) {
            const d = new Date(val); // val 为表格内取到的后台时间
            const month =d.getMonth() + 1 < 10 ? `0${d.getMonth() + 1}` : d.getMonth() + 1;
            const day = d.getDate() < 10 ? `0${d.getDate()}` : d.getDate();
            const hours = d.getHours() < 10 ? `0${d.getHours()}` : d.getHours();
            const min = d.getMinutes() < 10 ? `0${d.getMinutes()}` : d.getMinutes();
            const sec = d.getSeconds() < 10 ? `0${d.getSeconds()}` : d.getSeconds();
            const times = `${d.getFullYear()}-${month}-${day} ${hours}:${min}:${sec}`;
            return times;
        },
    }
}
</script>
<style scoped>
.content{background-color: #f7f7f7;}
main {
    padding: 0 20rem;
}

main>div:first-child {
    position: relative;
    margin-top: -290rem;
    border-radius: 20rem;
    background-color: #fff;
    margin-bottom: 20rem;
}

main .wash-info {
    padding: 30rem 35rem 42rem 20rem;
}

main .wash-info h1,
main .car-info h1 {
    padding-bottom: 20rem;
    border-bottom: 7rem solid #f7f7f7;
    margin-bottom: 25rem;
    font-size: 32rem;
    line-height: 32rem;
}

main .wash-info p {
    padding: 0 15rem;
    font-size: 24rem;
    line-height: 35rem;
    margin-bottom: 25rem;
    overflow: hidden;
}
main .wash-info p:last-child {margin-bottom: 0;}

main .wash-info p span,
main .car-info p span {
    padding-left: 20rem;
}
main .wash-info p img {
    float: right;
    vertical-align: middle;
    padding-right: 32rem;
}

main .car-info {
    padding: 42rem 35rem 14rem 20rem;
    background-color: #fff;
}

main .car-info>div {
    padding: 0 15rem;
}

main .car-info p {
    font-size: 24rem;
    line-height: 24rem;
    margin-bottom: 36rem;
}

main .car-info .car-img {
    margin-bottom: 20rem;
}

main .car-info img {
    width: 150rem;
    height: 150rem;
    vertical-align: middle;
    margin-bottom: 26rem;
    margin-right: 30rem;
    border-radius: 10rem;
}
.btn{text-align: center;margin-top: 71rem;}
button{font-size: 26rem;background-color: #0762e6;color: #fff;border: 0;border-radius: 38rem;line-height: 26rem;width: 520rem;height: 75rem;margin-bottom: 104rem;}
</style>